<template> 
	<div class="model" v-if="isShow">
		<h2 class="model__title">
			商品详情
			<span class="model__title--close" @click="close">&times;</span>
		</h2>
		<div class="model__content" v-loading="loading">
			<div v-if="data">
				<div class="item" v-if="data.aggainst_reason">
					<h2 class="item__title item__title-warning">驳回理由</h2>
					<div class="item__reason">
						{{data.aggainst_reason}}
					</div>
				</div>
				<div class="item">
					<h2 class="item__title">商品基本信息</h2>
					<div class="item__detail item__detail-block">
						<span class="item__detail--title">商品名称:</span>
						<span class="item__detail--value">{{ data.commodity_name }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">货号:</span>
						<span class="item__detail--value">{{ data.commodity_no }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">库存:</span>
						<span class="item__detail--value">{{ data.stocks }}</span>
					</div>
					<div class="item__detail" v-if="data.onshief_time">
						<span class="item__detail--title">上架时间:</span>
						<span class="item__detail--value">{{ data.onshief_time | formatTime }}</span>
					</div>
					<div class="item__detail" v-if="data.offshief_time">
						<span class="item__detail--title">下架时间:</span>
						<span class="item__detail--value">{{ data.offshief_time | formatTime }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">销售量:</span>
						<span class="item__detail--value">{{ data.sale_num }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">累计销量:</span>
						<span class="item__detail--value">{{ data.total_sale_num }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">评论数量:</span>
						<span class="item__detail--value">{{ data.comment_num }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">评分:</span>
						<span class="item__detail--value">{{ data.comment_score }}分</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">好评率:</span>
						<span class="item__detail--value">{{ data.good_comment_rate }}%</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">收藏数:</span>
						<span class="item__detail--value">{{ data.collection_num }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">浏览次数:</span>
						<span class="item__detail--value">{{ data.see_num }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">商品性质:</span>
						<span class="item__detail--value">
							<el-tag v-if="data.is_fen" size="small">点分商品</el-tag>
							<el-tag v-if="data.is_online" size="small">线上销售</el-tag>
							<el-tag v-if="data.is_post" size="small">邮寄商品</el-tag>
						</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">所属品牌:</span>
						<span class="item__detail--value">
							<el-tag type="success" size="small">{{ data.brand?(data.brand.brand_name?data.brand.brand_name:'无'):'无' }}</el-tag>
						</span>
					</div>
				</div>
				<div class="item">
					<h2 class="item__title">品牌信息</h2>
					<div class="item__detail">
						<span class="item__detail--title">商家名称:</span>
						<span class="item__detail--value">{{ data.company.company_name }}</span>
					</div>
				</div>
				<div class="item">
					<h2 class="item__title">价格信息</h2>
					<div class="item__detail">
						<span class="item__detail--title">价格:</span>
						<span class="item__detail--value">{{ data.price.price }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">卖价:</span>
						<span class="item__detail--value">{{ data.price.sale_price }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">点币价格:</span>
						<span class="item__detail--value">{{ data.price.bi_price }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">点币:</span>
						<span class="item__detail--value">{{ data.price.dian_bi }}</span>
					</div>
					<div class="item__detail">
						<span class="item__detail--title">赠送点分:</span>
						<span class="item__detail--value">{{ data.price.give_fen }}</span>
					</div>
				</div>
				<div class="item">
					<h2 class="item__title">规格</h2>
					<div class="item__detail" v-for="item in data.props">
						<span class="item__detail--title">{{ item.prop_name }}:</span>
						<span class="item__detail--value">{{ item.prop_value }}</span>
					</div>
				</div>
				<div class="item">
					<h2 class="item__title">主图</h2>
					<div class="item__pic" v-if="data.mainimg && data.mainimg.url">
						<img :src="data.mainimg.url" alt="" class="item__pic--img"/>
					</div>
					<div v-else class="item__no-data">没有数据</div>
				</div>
				<div class="item">
					<h2 class="item__title">大图</h2>
					<div class="item__pic" v-if="data.bigimgs" >
						<img :src="item.url" class="item__pic--img" v-for="item in data.bigimgs"/>
					</div>
					<div v-else class="item__no-data">没有数据</div>
				</div>
				<div class="item">
					<h2 class="item__title">详情图</h2>
					<div class="item__pic" v-if="data.detailimgs" >
						<img :src="item.url" class="item__pic--img" v-for="item in data.detailimgs"/>
					</div>
					<div v-else class="item__no-data">没有数据</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		props: ["id", "isShow"],
		data() {
			return {
				data: null,
				loading: true
			}
		},
		created() {
			
		},
		methods: {
			close() {
				this.$emit("closeModel");
			},
			fetchGoodsDetail() {
				this.loading = true;
				var url = `${this.url}/commodity/item_get_detail_man.action`;
				var params = {
					commodity_id: this.id
				};
				this.$http.get(url,{ params }).then((res)=> {
					this.loading = false;
					this.data = res.data.result;
				});
			}
		},
		watch: {
			isShow(newVal) {
				if (newVal) {
					this.fetchGoodsDetail();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>